<template>
	<div class="app">
		<h2>sum1为：{{ sum }}</h2>
		<h2>sumCopy为：{{ sumCopy }}</h2>
		<h2>名字为:{{ person.name }}</h2>
		<h2>年龄为:{{ person.age }}</h2>
		<h2>爱好为：{{ person.other.hobby }}</h2>

		<button @click="changeSum">sum+1</button>
		<button @click="changeSumCopy">sumCopy+1</button>
		<button @click="changeName">改名</button>
		<button @click="changeAge">改年龄</button>
		<button @click="changeHobby">改爱好</button>
		<button @click="changePerson">改人</button>

	</div>
</template>

<script setup lang="ts" name="App">
	import { ref,reactive,readonly,shallowReadonly} from 'vue';

	let sum = ref(0)
	let sumCopy = readonly(sum)

	let person1 = reactive({
		name:'张三',
		age:18,
		other:{
			hobby:'篮球'
		}
	})

	let person = shallowReadonly(person1)

	function changeSum(){
		sum.value += 1
	}
	function changeSumCopy(){
		sumCopy.value += 1
	}
	function changeName(){
		person.name = '李四'
	}
	function changeAge(){
		person.age = 22
	}
	function changeHobby(){
		person.other.hobby = '射击'
	}
	function changePerson(){
		//person = {name:'王五',age:80,other:{hobby:['乒乓球']}}
		Object.assign(person, {name:'王五',age:80,other:{hobby:'乒乓球'}})
	}

</script>

<style scoped>
	.app{
		background-color: #ddd;
		border-radius: 10px;
		box-shadow: 0 0 10px;
		padding: 10px;
		margin-top: 20px;
	}
	button{
		margin:0 5px;
	}
</style>